<template>
  <el-dialog class="dialog" :close-on-click-modal="false" :title="title" :visible.sync="dialogVisible"
    :width="width + 'px'">
    <slot name="content"></slot>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="handleSure">确定</el-button>
      <el-button size="medium" @click="dialogVisible = false">取消</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: 'CommonDialog',
  props: {
    title: {
      type: String,
      default: '标题',
    },
    dialogShow: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: '800',
    },
    height: {
      type: String,
      default: '300',
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.dialogShow;
      },
      set(val) {
        this.$emit('update:dialogShow', val);
      },
    },
  },
  methods: {
    handleSure() {
      // this.dialogVisible = false
      this.$emit('makeSure')
    }
  }
};
</script>

<style scoped lang="less">
.dialog {
  /deep/ .el-dialog {
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    margin-top: 10vh !important;

    .el-dialog__header {
      height: 39px;
      line-height: 39px;
      padding: 0 16px;
      border: 1px solid #eeeeee;
      border-radius: 6px 6px 0 0;
      font-size: 16px;
      font-weight: bolder;
      color: #333333;

      .el-dialog__close {
        top: 19.5px;
        transform: translateY(-50%);
      }
    }

    .el-dialog__body {
      flex: 1;
      padding: 16px 24px;
    }

    .el-dialog__footer {
      padding: 0 16px;
      height: 65px;
      line-height: 65px;
      border-top: 1px solid #eeeeee;

      .el-button {
        width: 74px;
        height: 32px;
        padding: 0;
        text-align: center;
        background: #ffffff;
        border-radius: 2px;
        border: 1px solid #dcdee0;

        span {
          line-height: 32px;
        }

        &:hover {
          color: #155bd4;
          background: #edf4ff;
          border: 1px solid #155bd4;
        }
      }
    }
  }
}
</style>